<template>
	<view class="pay">
		<view class="pay-money">
			<text>￥</text>
			<text class="uni-h1">{{orderMoney}}</text>
		</view>
		
		<view v-if="couponMoney > 0" class="coupon-money flex-center-between">
			<text>优惠金额</text>
			<text>-￥{{couponMoney}}</text>
		</view>
			
		<view class="select-pay">
			<view class="select-pay-tit">选择支付方式</view>
			<view class="select-pay-list">
				<radio-group @change="payTypeChange">
					<label
						class="select-pay-list-item flex-center-between"
						v-for="(item, index) in payTypeList"
						:key="index" v-if="index != 0">
						<view class="flex-center">
							<image
								class="select-pay-list-item-img"
								:src="item.img"
								mode="aspectFill">
							</image>
							<text>{{item.name}}</text>
						</view>
						<radio 
							v-if="index != 0" 
							:value="index" 
							:disabled="!disablePayType.includes(index+1)" 
							:checked="index+1 === curPayType" 
						/>
					</label>
				</radio-group>
			</view>
		</view>
		<view class="submit-btn">
			<button @click="payNow()">立即支付</button>
		</view>
	</view>
</template>

<script>
	import uniIcon from "@/components/uni-icon.vue"
	export default {
		components: {
			uniIcon,
		},
		data() {
			return {
				curPayType: 2,
				disablePayType: [],
				orderNum: '',
				orderMoney: 0,
				finalMoney: 0,
				couponMoney: 0,
				orderInfo: {},
				platform: 2, // 1、小程序  2、APP
				payTypeList: [
					{
						name: '支付宝支付',
						img: '../../static/images/order-pay-ali.png'
					},
					{
						name: '微信支付',
						img: '../../static/images/order-pay-wechat.png'
					},
					{
						name: '对公转账',
						img: '../../static/images/order-pay-company.png'
					},
					{
						name: '他人代付',
						img: '../../static/images/order-pay-others.png'
					},
					{
						name: '线下付款',
						img: '../../static/images/user-coupon.png'
					}
				],
			}
		},
		onLoad(option) {
			this.orderNum = option.orderNum || ''
			this.couponMoney = parseFloat(option.couponMoney) || 0
			this.orderMoney = parseFloat(option.orderMoney) - this.couponMoney
			let payWay = option.payWay || 0
			// this.curPayType = Number(payWay)
			// this.disablePayType = [1, 2, 3, 4, 5]
			if (payWay === '2') {
				this.curPayType = 2
				this.disablePayType = [2]
			} else if (payWay === '4') {
				this.curPayType = 4
				this.disablePayType = [4]
			} else {
				this.curPayType = 2
				this.disablePayType = [1, 2, 3, 4, 5]
			}
			// #ifdef MP-WEIXIN
			this.platform = 1
			// #endif
			// #ifdef APP-PLUS
			this.platform = 2;
			// #endif
			let pages = getCurrentPages();
		},	
		// onBackPress(event) {
		// 	let pages = getCurrentPages();
		// 	let route = pages[pages.length - 2].route;
		// 	if(route.includes('userOrder')){
		// 		uni.navigateTo({
		// 			url: route
		// 		})
		// 	} else {
		// 		uni.switchTab({url: '/pages/index/index'})
		// 	}
		// 	return true;
		// },
		methods: {
			/**
			 * 获取订单信息
			 */
			async payNow() {
				if (this.curPayType === 1) {
					uni.showModal({
						title: '提示',
						content: '支付宝支付尚未上线，敬请期待！',
						showCancel: false
					})
					return
				}
				if (this.curPayType === 3) {
					this.pageTo('payPublic?order_no=' + this.orderNum)
					return
				}
				if (this.curPayType === 5) {
					this.pageTo('payOffline?order_no=' + this.orderNum)
					return
				}
				let res = await this.$http.request({
					method: 'post',
					url: '/api/order/pay',
					data: {
						order_no: this.orderNum,
						pay_way: this.curPayType, //支付类型 1支付宝 2微信 3对公转账 4他人支付 5线下支付 （默认微信支付，兼容以前没有传支付类型）
						platform: this.platform
					}
				})
				if (res.status === 1) {
					if (this.curPayType === 2) {
						this.orderInfo = res.data
						this.requestPayment()
					} else if (this.curPayType === 4) {
						let code_url = encodeURIComponent(res.data.code_url)
						this.pageTo('payForMe?orderMoney='+this.orderMoney+'&orderNum='+this.orderNum+'&codeUrl='+code_url)
					}
				} else {
					uni.showToast({
						title: res.message,
						icon: 'none',
						duration: 3000
					})
				}
			},
			/**
			 * 支付
			 */
			requestPayment() {
				let self = this;
				// #ifdef MP-WEIXIN
				uni.requestPayment({
					timeStamp: String(self.orderInfo.time),
					nonceStr: self.orderInfo.nonce_str,
					package: self.orderInfo.package,
					signType: 'MD5',
					paySign: self.orderInfo.sign,
				    success: function (res) {
				        console.log('微信支付成功：');
						self.pageTo('/pages/index/payResult?result=1')
						uni.showToast({
							title: '支付成功',
							icon: 'success'
						})
				    },
				    fail: function (err) {
				        console.log('微信支付失败：',err);
						self.pageTo('/pages/index/payResult?result=0')
						uni.showToast({
							title: '支付失败',
							icon: 'none',
							duration: 3000
						})
				    }
				});
				// #endif
				
				// #ifdef APP-PLUS
				uni.requestPayment({
					provider: 'wxpay',
					orderInfo: JSON.stringify({
						appid: self.orderInfo.appid,
						noncestr: self.orderInfo.noncestr,
						package: self.orderInfo.package,
						partnerid: self.orderInfo.partnerid,
						prepayid: self.orderInfo.prepayid,
						sign: self.orderInfo.sign.toLowerCase(),
						timestamp: String(self.orderInfo.timestamp),
					}), //订单数据
					success: () => {
						self.pageTo('/pages/index/payResult?result=1')
						uni.showToast({
							title: '支付成功',
							icon: 'success'
						})
					},
					fail: (err) => {
						console.log('微信支付失败：',err);
						self.orderInfo = null;
						self.pageTo('/pages/index/payResult?result=0')
						uni.showToast({
							title: '支付失败',
							icon: 'none',
							duration: 3000
						})
					},
					complete: (res) => {
						console.log('res',res)
						// uni.showToast({
						// 	title: err.errMsg,
						// 	icon: 'none',
						// 	duration: 5000
						// })
					}
				});
				// #endif
			},
			/**
			 * 切换支付方式
			 * @param {Object} e
			 */
			payTypeChange(e) {
				// console.log(e)
				this.curPayType = Number(e.detail.value) + 1
			},
			/**
			 * 跳转
			 * @param {String} page
			 */
			pageTo(page) {
				uni.navigateTo({
					url: page
				})
			},
			
		}
	}
</script>

<style lang="scss">
	.pay{
		background: $uni-bg-color;
		.pay-money{
			height: 400rpx;
			line-height: 400rpx;
			text-align: center;
		}
		.coupon-money{
			padding: 0 30rpx;
			line-height: 60rpx;
			color: $uni-text-color-grey2;
		}
		.select-pay{
			&-tit{
				padding-left: 30rpx;
				color: $uni-text-color-grey2;
			}
			&-list{
				margin: 0 30rpx;
				background: $uni-bg-color;
				border-radius: $uni-border-radius-base;
				&-item{
					height: 110rpx;
					border-bottom: 1rpx solid $uni-border-color;
					&:last-child{
						border-bottom: none;
					}
					&-img{
						height: 40rpx;
						width: 40rpx;
						margin-right: 10rpx;
					}
				}
				&:last-child{
					border-bottom: none;
				}
			}
		}
		
		.submit-btn{
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
			padding: 0 30rpx;
		}
	}
</style>
